<template>
	<view class="expert-list flex-c">
		<view class="expert-list-item" v-for="(expert, index) in expertList" :key="expert.expertId" @tap="$CHS.goExpertHome(expert.expertId)">
			<view class="expert-des-head flex-r ac">
				<view class="author-image border-round">
					<lazy-image class="inheritwh border-round" :src="expert.expertAvatar+'?imageView2/1/w/100/h/100/q/50'" type="expert" fit="cover"></lazy-image>
					<view class="expert-note" v-if="expert.saleArticleNum" :class="{'round': expert.saleArticleNum < 10}">
						<text>{{expert.saleArticleNum}}</text>
					</view>
				</view>
				<view class="author-info flex-c">
					<view class="info-top flex-r ac">
						<text class="text-regular text-bold">{{expert.expertName}}</text>
						<image v-if="expert.cardFlag == 1" src="@/public/images/public/y@1x.png" mode="aspectFit"></image>
						<text class="tag-red" v-if="expert.hotContineTxt">{{expert.hotContineTxt}}</text>
						<text class="tag-gold" v-else-if="expert.hitResultTxt">{{expert.hitResultTxt}}</text>
					</view>
					<view class="info-detail text-info flex-r ac" v-if="expert.expertTag || Number(expert.hitRate)>=60">
						<text class="color-grey text-hidden" v-if="expert.expertTag">{{ expert.expertTag}}</text>
						<text class="color-grey" v-if="expert.expertTag && Number(expert.hitRate)>=60" space="ensp">{{' | '}}</text>
						<template v-if="Number(expert.hitRate)>=60">
							<text class="color-grey">{{expert.hitRateName}}：</text>
							<text class="color-red">{{expert.hitRate}}%</text>
						</template>
					</view>
				</view>
				<view class="author-fav flex-c">
					<button v-if="(expert.followStatus == 1 && noFollow.indexOf(expert.expertId) == -1) || isFollow.indexOf(expert.expertId) > -1" class="favbtn active-msg" :class="{'nochat': expert.userIdentity != 1}" type="warn" size="mini" @tap.stop="$CHS.goChat(expert.expertId, expert.userIdentity)">私信</button>
					<button v-else class="favbtn active-fav" type="warn" size="mini" @tap.stop="favExpert(expert.expertId)">关注</button>
				</view>
			</view>
			<view class="expert-des-foot text-info color-grey flex-r ac jsb">
				<view class="flex-r ac">
					<text class="text">近7天有</text>
					<text class="color-blue">{{expert.newArticleNum || 0}}</text>
					<text>条最新方案</text>
				</view>
				<image class="icon" src="@/public/images/public/yjt_h.png" mode="aspectFit"></image>
			</view>
		</view>
	</view>
</template>

<script>
	/**
	 * ExpertList 专家列表
	 * @description 专家搜索结果列表
	 * @property {Array} list 专家列表数据
	 * @example <ExpertList :list="list"></ExpertList>
	 */
	export default {
		name:"ExpertList",
		props: {
			list: { //专家列表
				type: [Array,Object],
				default: ()=>[]
			}
		},
		data() {
			return {
				isFaving: null //防止重复关注
			}
		},
		computed: {
			expertList() {
				return this.list
			},
			noFollow() {
				return this.$store.state.expertNoFollow
			},
			isFollow() {
				return this.$store.state.expertFollow
			}
		},
		methods: {
			/**
			 * @description 关注专家
			 * @param {string} eid 专家ID
			 */
			favExpert(eid) {
				if(eid === this.isFaving){
					return
				}else{
					this.isFaving = eid
					this.$CHS.favExpert(eid).finally(()=>{
						this.isFaving = null
					})
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	.expert-list{
		.expert-list-item{
			background-color: #fff;
			border-bottom: 1rpx #EDEDED solid;
			padding: 30rpx 20rpx;
			.expert-des-head{
				.author-image{
					width: 88rpx;
					height: 88rpx;
					background-color: #FFFFFF;
					background-size: 100%;
					position: relative;
				}
				.author-info{
					flex: 2;
					margin-left: 20rpx;
					.info-top{
						image{
							margin-left: 7rpx;
							width: 24rpx;
							height: 24rpx;
						}
					}
					.info-detail{
						margin-top: 20rpx;
						.text-hidden{
							max-width: 160rpx;
						}
					}
				}
				.author-fav{
					.favbtn{
						width: 120rpx;
						height: 56rpx;
						box-sizing: border-box;
						border-radius: 28rpx;
						font-size: 24rpx;
						color: #FFFFFF;
						padding: 0;
						margin: 0;
						line-height: 56rpx;
						&.active-fav{
							background: #0055FF;
							border: none;
						}
						&.active-msg{
							color: #0055FF;
							background: #FFF;
							border: 2rpx solid #0055FF;
							line-height: 52rpx;
						}
						&.nochat{
							border-color: #99BBFF;
							color: #99BBFF;
						}
					}
				}
			}
			.expert-des-foot{
				margin: 20rpx 0 0 108rpx;
				height: 48rpx;
				padding: 0 20rpx;
				background: #F2F5FA;
				border-radius: 4rpx;
				color: #5C7099;
				.icon{
					width: 25rpx;
					height: 26rpx;
				}
			}
		}
		.expert-list-item:last-child{
			border-bottom: none;
		}
	}
</style>
